<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
</head>
<body>
    <div class="ok-body">
        <!--form表单-->
        <form class="layui-form layui-form-pane ok-form">
            必填部分
            <hr class="layui-bg-black">
            <div class="layui-form-item">
                <label class="layui-form-label">所属专业</label>
                <div class="layui-input-block">
                    <select name="professionId" lay-verify="required" id="profession" lay-filter="changeClass">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属班级</label>
                <div class="layui-input-block">
                    <select name="clazzid" lay-verify="required" id="classes">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input type="text" name="stuid" placeholder="请输入学生ID（学号）" class="layui-input" autocomplete="off" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生名字</label>
                <div class="layui-input-block">
                    <input type="text" name="realname" placeholder="请输入学生名字" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" value="123456" placeholder="请输入学生密码" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-block">
                    <input type="text" name="dateofbirth" id="birthday" lay-verify="data|required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="idnumber" placeholder="请输入学生身份证号" autocomplete="off" class="layui-input" lay-verify="identity">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" placeholder="请输入学生邮箱" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-block">
                    <input type="radio" name="education" value="专科" title="专科">
                    <input type="radio" name="education" value="本科" title="本科" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">毕业年份</label>
                <div class="layui-input-block">
                    <input type="text" name="graduation" id="graduation" lay-verify="data|required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            选填部分（可空）
            <hr class="layui-bg-black">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="text" name="photo" placeholder="请输入头像路径" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">婚姻状况</label>
                <div class="layui-input-block">
                    <input type="radio" name="marriagestatus" value="离婚" title="离婚">
                    <input type="radio" name="marriagestatus" value="已婚" title="已婚">
                    <input type="radio" name="marriagestatus" value="未婚" title="未婚" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phonenumber" placeholder="请输入学生联系电话" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" placeholder="请输入学生家庭住址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/model.js"></script>
    <script>
        layui.use(["element", "form", "laydate", "okLayer", "jquery", "okMd5"], function () {
            let form = layui.form;
            let laydate = layui.laydate;
            let okLayer = layui.okLayer;
            let okMd5 = layui.okMd5;
            let $=layui.jquery;
            laydate.render({elem: "#birthday", type: "date"});
            laydate.render({elem: '#graduation', type: "date"});

            let professionId;
            let classesId;

            // 获取contentText
            const ctx = function () {
                let pathName = document.location.pathname;
                let index = pathName.substr(1).indexOf("/");
                let result = pathName.substr(0, index + 1);
                return result;
            }();

            function getAllProfession(success,error){
                $.ajax({
                    url: ctx+"/admin/getAllProfessionPage",
                    type: 'POST',
                    headers: {"token":sessionStorage.getItem("token")},
                }).done(function(datas) {
                    var list=datas['data'];
                    var option;
                    if (list.length!=0){
                        for(var i=0;i<list.length;i++){
                            if (i==0){
                                professionId=list[i]['professionid'];
                            }
                            option+="<option value='"+list[i]['professionid']+"'>"+list[i]['professionname']+"</option>";//拼接option中的内容
                            $("#profession").html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                        }
                    }else{
                        professionId=-1;
                    }
                    form.render('select');//重点：重新渲染select
                    success();
                }).fail(function() {
                    error();
                    console.log("error");
                });
            }

            function getClassesByProfessionId(success,error){
                $.ajax({
                    url: ctx+"/admin/getClzaaByProfessionId",
                    type: 'POST',
                    data:{"professionId":professionId},
                    headers:{"token":sessionStorage.getItem("token")},
                }).done(function(datas) {
                    var list=datas['data'];
                    var option;
                    if (list!=null){
                        for(var i=0;i<list.length;i++){
                            if (i==0){
                                classesId=list[i]['clazzid'];
                            }
                            option+="<option value='"+list[i]['clazzid']+"'>"+list[i]['clazzname']+"</option>";//拼接option中的内容
                            $("#classes").html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                        }
                    }else{
                        classesId=-1;
                    }
                    success();
                    form.render('select');//重点：重新渲染select
                }).fail(function() {
                    console.log("error");
                    error();
                });
            }


            getAllProfession(function () {
                getClassesByProfessionId(function () {
                    console.log("数据获取成功");
                },function () {
                    console.log("error");
                });
            },function (){
                console.log("error");
            });


            form.on('select(changeProfession)',function(data){
                //执行清空
                $("#profession").empty();
                $("#classes").empty();
                form.render("select");

                collegeId=data.value;
                getAllProfession(function () {
                    getClassesByProfessionId(function () {
                        console.log("数据获取成功")
                    },function () {
                        console.log("error")
                    });
                },function () {
                    console.log("error")
                });
            })

            form.on('select(changeClass)',function(data){
                professionId=data.value;
                $("#classes").empty();
                form.render("select");
                getClassesByProfessionId(function () {
                    console.log("数据获取成功")
                },function () {
                    console.log("error")
                });
            })

            form.on("submit(add)", function (data) {
                let initData=data.field;
                let cla=new CLzaa(initData.clazzid,"","","");
                let stu=new Student(initData.stuid,initData.realname,okMd5(initData.password),initData.sex,initData.idnumber,
                    initData.dateofbirth,initData.photo,initData.phonenumber,initData.email,initData.education,initData.address,
                    initData.graduation,initData.marriagestatus,cla)

                $.ajax({
                    url:ctx+'/admin/addStudent',
                    type:'POST',
                    data:{"jsonStudent":JSON.stringify(stu)},
                    dataType:'json',
                    error:function(){
                        okLayer.redCrossMsg("服务器错误")
                    },
                    success:function(data){
                        if (data.code == 200) {
                            // 业务正常
                            okLayer.greenTickMsg("添加成功", function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        } else {
                            // 业务异常
                            okLayer.yellowSighMsg(data.msg)
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>
